<template>
  <div class="loginPage">
    <header>
      <h1 class="title-agile text-center">快速登录/注册</h1>
    </header>
    <!-- //header -->
    <section class="login-wrap">
      <div class="main_w3agile">
        <input id="tab-1" type="radio" name="tab" class="sign-in" checked />
        <label for="tab-1" class="tab">登录</label>
        <input id="tab-2" type="radio" name="tab" class="sign-up" />
        <label for="tab-2" class="tab">注册</label>

        <div class="login-form">
          <!-- signin form -->
          <div class="signin_wthree">

            <el-form model="users">
              <el-form-item label="账号：" class="group">
                <el-input v-model="users.userAccount" class="input"></el-input>
              </el-form-item>
              <el-form-item label="密码：" class="group">
                <el-input v-model="users.password" type="password" class="input"></el-input>
              </el-form-item>
              <el-form-item class="group">
                <div style="display: flex;justify-content: space-around;">
                  <el-button type="primary" @click="login()" class="button">登录</el-button>
                </div>
              </el-form-item>
            </el-form>

          </div>


          <!-- //signin form -->

          <!-- signup form -->
          <div class="signup_wthree">

            <el-form model="users">
              <el-form-item label="用户名：" class="group">
                <el-input v-model="users.userName" class="input"></el-input>
              </el-form-item>
              <el-form-item label="账号：" class="group">
                <el-input v-model="users.userAccount" class="input"></el-input>
              </el-form-item>
              <el-form-item label="密码：" class="group">
                <el-input v-model="users.password" type="password" class="input"></el-input>
              </el-form-item>
              <el-form-item label="确认密码：" class="group">
                <el-input v-model="password" type="password" class="input"></el-input>
              </el-form-item>
              <el-form-item class="group">
                <el-button type="primary" @click="signUp()" class="button">注册</el-button>
              </el-form-item>
            </el-form>

          </div>

          <!-- //signup form -->
        </div>
      </div>
    </section>
    <!-- //section -->
    <footer>
      <div class="copy-wthree text-center">
        <p>
          大P线上综合旅游服务平台 | 庞博毕设作品
          <a href="https://gitee.com/alibate/travel_client.git">Gitee</a>
        </p>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      users: {},
      password: "",
    };
  },
  methods: {

    //登录--逻辑合并，根据传回的roleId选择登入系统
    login(){
      this.$api.loginApi.login(this.users).then(res=>{
        if (res.data.code == 0) window.alert(res.data.msg);//登陆失败
        else{//登陆成功
          //先存储本地数据
          localStorage.setItem('USERID', res.data.data.userId);
          localStorage.setItem('USERNAME', res.data.data.userName);
          if(res.data.data.roleId == 1){
            this.$router.push({ name: "admin", params: { users: res.data.data } });
          }else if(res.data.data.roleId == 2 || res.data.data.roleId == 3){
          this.$router.push({ name: "home", params: { users: res.data.data } });
          }else{
            window.alert("其他情况，比如未完成的商户端")
          }
        }
      })
    },

    //注册：先判断两次密码是否相同，相同则进入注册流程
    signUp() {
      if (this.users.password != this.password) {
        window.alert("两次密码不同，请重新输入！");
      } else {
        this.$api.loginApi.register(this.users).then((res) => {
          if (res.data.code == 0) window.alert(res.data.msg);
          else window.alert("注册成功！");
        });
      }
    },

  },



};
</script>

<style scoped>
@import url("//fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800");
@import url("../../assets/css/login.css");

.el-input ::v-deep .el-input__inner {
  height: 100%;
  width: 100%;
  border: none !important;
  background-color: rgba(255, 255, 255, 0.54);
}

.loginPage {
  background: url(../../assets/images/banner1.webp) no-repeat center center fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -ms-background-size: cover;
  background-attachment: fixed;
  font-family: 'Dosis', sans-serif;
}
</style>
